<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名片</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="icon" href="./card.ico" type="image/x-icon">

    <style>
        body {
            background-color: rgb(204, 212, 230);
            display: flex;
            justify-content: center;
        }

        .a {
            position: relative;
            width: 700px;
            height: 400px;
            border: #fff 10px solid;
            background-color: rgb(120, 140, 200);
            top: 120px;
            border-radius: 20px;
            overflow: hidden;
        }

        .b {
            position: absolute;
            width: 200px;
            height: 300px;
            left: 0;
            margin: 75px 50px;
            transition: 1s;
        }

        .b a {
            text-decoration: none;
            color: #fff;
            font: 900 28px '';
        }

        .b h2 {
            /* 鼠标放开时的动画，第一个值是动画的过渡时间
            第二个值是延迟一秒后执行动画 */
            transition: .5s 1s;
            opacity: 0;
            color: rgb(30, 210, 200);
        }

        .b span {
            transition: .5s 1s;
            color: #fff;
            font: 500 15px '';
            position: absolute;
            top: 70px;
        }

        .c {
            position: absolute;
            top: -130px;
            right: -240px;
        }

        .d,
        .e {
            position: absolute;
            right: calc(var(--i)*100px);
            width: calc(var(--w)*40px);
            height: 500px;
            overflow: hidden;
            border-radius: 100px;
            transform: rotateZ(220deg) translate(0, 0);
            background: rgb(240, 220, 150);
            transition: .5s .5s;
        }

        .d:nth-child(2) {
            background: rgb(240, 190, 230);
        }

        .e {
            left: -470px;
            top: -140px;
            width: 70px;
            background-color: rgb(90, 220, 150);
        }

        .a:hover .c div {
            /* 设置延迟动画 */
            transition: .5s calc(var(--i)*.1s);
            /* 移动的轨迹 */
            transform: rotateZ(220deg) translate(-200px, 400px);
        }

        .a:hover .b {
            transition: 1s .5s;
            left: 370px;
        }

        .a:hover .b span {
            transition: 1s .5s;
            top: 105px;
        }

        .a:hover .b h2 {
            transition: 1s .5s;
            opacity: 1;
        }

        .f {
            width: 250px;
            height: 250px;
            position: absolute;
            background-image: url("qianqiu.png");
            background-size: cover;
            margin: 70px;
            opacity: 0;
            transition: .5s;
        }

        .a:hover .f {
            transition: 1s 1.3s;
            opacity: 1;
        }

        .a p {
            background: transparent;
            color: #000000;
            animation: 2s blink-alternate infinite;
            animation-direction: alternate-reverse;
            text-align: center;
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
        }

        @keyframes blink-alternate {

            50% {
                color: black;
            }

            100% {
                color: transparent;
            }
        }






        .github-corner:hover .octo-arm {
            animation: octocat-wave 560ms ease-in-out
        }

        @keyframes octocat-wave {

            0%,
            100% {
                transform: rotate(0)
            }

            20%,
            60% {
                transform: rotate(-25deg)
            }

            40%,
            80% {
                transform: rotate(10deg)
            }
        }

        @media (max-width:500px) {
            .github-corner:hover .octo-arm {
                animation: none
            }

            .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }
        }
    </style>
</head>

<body>
    <!-- 名片分三大块
    最外层的一块a
    文字一大块b
    平面圆柱一块c -->
    <div class="a">
        <div class="b">
            <a href="#">徐润基</a>
            <h2>445484430@qq.com</h2>
            <span>201930344176</br>SCUT,19计科二班</br>网络应用开发电商项目<br />使用spring boot框架实现<br /><a
                    href="https://gitee.com/suoyue/store"
                    style="text-decoration: underline; font-size: 20px;">gitee项目地址</a></span>
        </div>
        <div class="c">
            <!-- --i是用来计算平面圆柱的动效延迟和距离的
            --w则是用来计算平面圆柱的宽度 -->
            <div class="d" style="--i:1;--w:1.5"></div>
            <div class="d" style="--i:2;--w:1.6"></div>
            <div class="d" style="--i:3;--w:1.4"></div>
            <div class="d" style="--i:4;--w:1.7"></div>
            <div class="e" style="--i:1"></div>
        </div>
        <!-- 设置二维码 -->
        <div class="f"></div>

        <p>hover me</p>
    </div>



<!--    <script>-->
<!--        var a_idx = 0;-->
<!--        jQuery(document).ready(function ($) {-->
<!--            addTips = function (e) {-->
<!--                var a = new Array("click","欢迎");-->
<!--                var i = $("<span />").text(a[a_idx]);-->
<!--                a_idx = (a_idx + 1) % a.length;-->
<!--                var x = e.pageX, y = e.pageY;-->
<!--                i.css({-->
<!--                    "z-index": 999999999999999,-->
<!--                    "top": y - 20,-->
<!--                    "left": x,-->
<!--                    "position": "absolute",-->
<!--                    "font-weight": "bold",-->
<!--                    "color": "#ff6651"-->
<!--                });-->

<!--                $("body").append(i);-->
<!--                i.animate({ "top": y - 180, "opacity": 0 }, 1500, function () { i.remove() })-->
<!--                return false;-->
<!--            }-->
<!--            //绑定鼠标左键-->
<!--            $("body").click(addTips);-->
<!--            //绑定鼠标左键-->
<!--            $("body").bind("contextmenu", addTips)-->
<!--        });-->
<!--    </script>-->

    <script>
        function o(w, v, i) {
            return w.getAttribute(v) || i
        }
        function j(i) {
            return document.getElementsByTagName(i)
        }
        function l() {
            var i = j("script"), w = i.length, v = i[w - 1];
            return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 0.5), c: o(v, "color", "0,0,0"), n: o(v, "count", 99) }
        }
        function k() {
            r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
        function b() {
            e.clearRect(0, 0, r, n);
            var w = [f].concat(t);
            var x, v, A, B, z, y;
            t.forEach(function (i) {
                i.x += i.xa,
                    i.y += i.ya,
                    i.xa *= i.x > r || i.x < 0 ? -1 : 1,
                    i.ya *= i.y > n || i.y < 0 ? -1 : 1,
                    e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
                for (v = 0; v < w.length; v++) {
                    x = w[v];
                    if (i !== x && null !== x.x && null !== x.y) {
                        B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
                        y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
                    }
                }
                w.splice(w.indexOf(i), 1)
            }), m(b)
        }
        var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n,
            m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
                window.setTimeout(i, 1000 / 45)
            },
            a = Math.random, f = { x: null, y: null, max: 20000 };
        u.className = "particle_canvas";
        var browserName = navigator.userAgent.toLowerCase();
        if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
            u.className += ' ie10_gte';
        };
        u.id = c;
        u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
        j("body")[0].appendChild(u);
        k(), window.onresize = k;
        window.onmousemove = function (i) {
            i = i || window.event,
                f.x = i.clientX,
                f.y = i.clientY
        },
            window.onmouseout = function () {
                f.x = null,
                    f.y = null
            };
        for (var t = [], p = 0; s.n > p; p++) {
            var h = a() * r,
                g = a() * n,
                q = 2 * a() - 1,
                d = 2 * a() - 1;
            t.push({ x: h, y: g, xa: q, ya: d, max: 6000 })
        }
        setTimeout(function () { b() }, 100)
    </script>

</body>



</html>